<template>
	<div class="com-container">
		<div class="com-chart" ref='seller_ref'></div>
	</div>
</template>

<script>
	//import {mapState} from 'vuex'
	export default {
		data() {
			return {
				//实例对象
				chartInstance: null,
				// 服务器返回的数据，数组格式
				resData: null,
				//当前页数
				currentPage: 1,
				//总页数
				totalPage: 0,
				//定时器命名
				timerId: null,
				//resize适配命名
				// resizeId:null
			}
		},
		computed:{
			theme(){
				 return this.$store.state.theme;
			}
		},
		watch:{
			theme(){
				//销毁当前图表
				this.chartInstance.dispose();
				//重新以最新主题初始化图表
				this.initChart();
				//完成适配
				this.screenAdapter();
				//更新图表展示
				this.updataChart();			
			}
		},
		created(){
			//组件创建完成后进行回调函数的注册
			this.$socket.registerCallBack('sellerData',this.getData)		
		},
		mounted() {
			this.initChart();
			//this.getData();
			this.$socket.send({
				action: 'getData',
				socketType: 'sellerData',
				chartName: 'seller',
				value: ''
			})
			this.screenAdapter();
			window.addEventListener("resize", this.screenAdapter);
		},
		destroyed() {
			clearInterval(this.timerId);
			window.removeEventListener("resize", this.screenAdapter);
			this.$socket.unRegisterCallBack('sellerData');
			
		},
		methods: {			
			//初始化echart实例对象
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.seller_ref,this.$store.state.theme);
				//对图表初始化配置的控制
				const initOption = {
					title:{
						text:'▎商家销售统计',
						textStyle:{
						},
						left:20,
						top:20,
					},
					grid: {
						top: '20%',
						left: '3%',
						right: '6%',
						bottom: '5%',
						containLabel: true // 距离是包含坐标轴上的文字
					},
					xAxis: {
						type: 'value'
					},
					yAxis: {
						type: 'category',
						// data: sellerNames
					},
					tooltip: {
					  trigger: 'axis',
					  axisPointer: {
					    type: 'line',
					    z: 0,
					    lineStyle: {
					      color: '#2D3443'
					    }
					  }
					},
					series: [{
						type: 'bar',
						// data: sellerValue,
						label: {
						  show: true,
						  position: 'right',
						  textStyle: {
						    color: 'white'
						  }
						},
						itemStyle: {
						  // 指明颜色渐变的方向
						  // 指明不同百分比之下颜色的值
						  color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
						    // 百分之0状态之下的颜色值
						    {
						      offset: 0,
						      color: '#d2eea3'
						    },
						    // 百分之100状态之下的颜色值
						    {
						      offset: 1,
						      color: '#61ace5'
						    }
						  ])
						}
					}]
				};
				this.chartInstance.setOption(initOption);
				//对实例对象进行鼠标事件的监听
				//鼠标移入，取消定时器
				this.chartInstance.on('mouseover', () => {
					clearInterval(this.timerId);
					// console.log("鼠标移入")
				})
				// //鼠标移出，开始定时器
				this.chartInstance.on('mouseout', () => {
				  this.startInterval();
					// console.log("鼠标移出")
				})
			},
			//获取服务器数据
			getData(ret) {
				// this.$axios.get('seller').then(res => {
				// 	// console.log(res.data);
				// 	this.resData = res.data;
				// 	//对数据从小到大排序
				// 	this.resData.sort((a, b) => a.value - b.value);
				// 	//获取总页数
				// 	this.totalPage = this.resData.length % 5 === 0 ? this.resData.length / 5 : this.resData.length / 5 + 1;
				// 	// console.log(this.totalPage);
				// 	// console.log(this.resData);
				// 	this.updataChart();
				// 	// console.log(this.currentPage)
				// 	//启动定时器
				// 	this.startInterval();
				// })
					this.resData = ret;
					//对数据从小到大排序
					this.resData.sort((a, b) => a.value - b.value);
					//获取总页数
					this.totalPage = this.resData.length % 5 === 0 ? this.resData.length / 5 : this.resData.length / 5 + 1;
					this.updataChart();
					//启动定时器
					this.startInterval();				
			},
			//更新图表
			updataChart() {
				const start = (this.currentPage - 1) * 5;
				const end = this.currentPage * 5;
				//当前页的数据
				const showData = this.resData.slice(start, end);
				const sellerNames = showData.map(item => {
					return item.name;
				})
				// console.log(sellerNames);
				const sellerValue = showData.map(item => {
					return item.value;
				})
				// console.log(sellerValue);
				const dataOption = {
					
					yAxis: {
						data: sellerNames
					},
					series: [{
						data: sellerValue
					}
					]
				}
				this.chartInstance.setOption(dataOption);
			},
			startInterval() {
				if (this.timerId) {
					clearInterval(this.timerId);
				}
				 this.timerId = setInterval(() => {
					this.currentPage++;
					if (this.currentPage > this.totalPage) {
						this.currentPage = 1;
					}
					// console.log(this.currentPage)
					this.updataChart();
				}, 3000)
			},
			//echarts实例屏幕的适配
			screenAdapter(){
				// console.log(this.$refs.seller_ref.offsetWidth)
				//跟屏幕大小有关的配置
				const suitableWeight = this.$refs.seller_ref.offsetWidth / 100 ;
				const adapterOption = {
					title:{
						textStyle:{
							fontSize:suitableWeight * 4
						},
					},
					tooltip: {
					  axisPointer: {
					    lineStyle: {
								width:suitableWeight * 5
					    }
					  }
					},
					series: [{
						// 图表宽度
						barWidth:suitableWeight* 4,
						itemStyle: {
							//设置圆角
							barBorderRadius:[0, suitableWeight * 3, suitableWeight * 3, 0]
						}
					}]					
				};
				this.chartInstance.setOption(adapterOption);
				this.chartInstance.resize();
			},
		}
	}
</script>


<style scoped>

</style>
